<template>
  <!--
    Loading状态 => 禁止关闭
        :close-on-click-modal="!loading"
        :close-on-press-escape="!loading"
        :show-close="!loading"
  -->
  <basic-dialog
    class="basic-dialog"
    :visible="visible"
    :title="pageTitle"
    :width="576"
    :close-on-click-modal="!loading"
    :close-on-press-escape="!loading"
    :show-close="!loading"
    @close="handleClosed"
    @open="handleDialogOpen"
    @handle-confirm="handleSubmit"
  >
    <el-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      class="w-full"
      label-width="60"
      label-position="left"
      require-asterisk-position="right"
    >
      <el-form-item label="用户名" prop="username">
        <el-input
          v-model="formState.username"
          maxlength="18"
          show-word-limit
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formState.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="formState.phone" placeholder="请输入电话"></el-input>
      </el-form-item>
      <el-form-item label="个人网站" prop="website">
        <el-input
          v-model="formState.website"
          placeholder="请输入个人网站"
        ></el-input>
      </el-form-item>
      <el-form-item label="简介" prop="description">
        <el-input
          v-model="formState.description"
          :autosize="{ minRows: 5, maxRows: 5 }"
          resize="none"
          maxlength="500"
          show-word-limit
          type="textarea"
          placeholder="请输入个人简介"
        ></el-input>
      </el-form-item>
    </el-form>
  </basic-dialog>
</template>

<script setup lang="ts">
import { type FormInstance, type FormItemRule } from 'element-plus'
import { cloneDeep } from 'lodash-es'

import type { UserModel } from '@/apis/model/user'

interface IFormState {
  username: string
  email: string
  phone: string
  website: string
  description: string
}

interface IProps {
  visible: boolean
  record?: UserModel | undefined | null
  loading?: boolean
}
interface IEmits {
  // 更新 显示状态
  (event: 'update:visible', value: boolean): void
  // 更新 loading状态
  (event: 'update:loading', value: boolean): void
  // 更新 数据
  (event: 'update:record', value?: UserModel): void
  // 通知上层更新
  (event: 'reload'): void
}

const emit = defineEmits<IEmits>()
const props = withDefaults(defineProps<IProps>(), {})
const pageTitle = computed(() =>
  props.record?.id ? '编辑管理员' : '添加管理员'
)

const formRef = ref<FormInstance>()

const formState = ref({
  username: '',
  email: '',
  phone: '',
  website: '',
  description: ''
})
/**
 * 需要了解 Ts里面的 keyof, Pick, Omit 语法
 * keyof Pick<IFormState, 'username' | 'email' | 'website'>挑选出 'username' | 'email' | 'website' 做验证
 * keyof Omit<IFormState, 'phone' | 'description'> 挑选出 'phone' | 'description' 不做验证
 * keyof IFormState 验证所有
 */
const rules: Record<
  keyof Pick<IFormState, 'username' | 'email' | 'website'>,
  FormItemRule[]
> = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 18, message: '用户名长度为2-18', trigger: 'blur' }
  ],
  email: [
    { required: true, type: 'email', message: '请输入邮箱', trigger: 'blur' }
  ],
  website: [
    {
      required: false,
      type: 'url',
      message: '请正确输入个人网站',
      trigger: 'blur'
    }
  ]
}
/**
 * 保存方法
 */
const handleSubmit = async () => {
  if (!formRef.value) return
  await formRef.value.validate()
  emit('update:loading', true)
  // 模拟接口
  setTimeout(() => {
    ToastUtils.success(props?.record?.id ? '修改成功' : '创建成功')
    emit('reload')
    emit('update:loading', false)
  }, 1000)
}

/**
 * @description dialog 打开事件
 */
const handleDialogOpen = () => {
  if (props.record?.id) {
    formState.value = cloneDeep(props.record)
  }
}

/**
 * @description dialog 关闭前事件
 */
const handleClosed = () => {
  emit('update:record', undefined)
  emit('update:visible', false)
  formRef.value?.resetFields()
}
</script>
